<template>
  <div>
    <div>审批页面</div>
    <el-input v-model="firstName" placeholder="请输入姓" size="normal" label="姓" clearable @change="changeInput"></el-input>
    <br>
    <el-input v-model="lastNameL" placeholder="请输入名" size="normal" label="名" clearable @change="changeInput"></el-input>
    <div>
      <span>全名：</span>
      <span>{{ fullName }}</span>
    </div>
    <div>
      <div class="base" :class="mood" @click="changeMood">test</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        firstName: '张',
        lastNameL: '三',
        mood: 'happy'
      }
    },
    computed: {
      fullName: {
        get () {
          return this.firstName.slice(0,3) + '-' + this.lastNameL
        },
        set (a, b) {
          console.log(a, b)
        }
      }
    },
    watch: {
      firstName: {
        immediate: true,
        deep: true,
        handler(newValue, old) {
          console.log(newValue, old)
        }
      }
    },
    methods: {
      changeInput(e) {
        console.log(e, '输入框发生改变')
      },
      changeMood () {
        // this.mood = 'said'
        const arr = ['happy', 'said', 'normol']
        this.mood = arr[Math.floor(Math.random()*3)]

      }

    },
  }
</script>

<style lang="scss" scoped>
.base {
  width: 500px;
  height: 100px;
  border: 1px solid black;
}
.happy {
  background-color: pink;
}
.said {
  border: 5px solid green;
  background-color: #ccc;
}
.normol {
  background-color: #8df;
}
</style>